<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击变换颜色</title>
	</head>	
	<style>
		#div01
		{
			width: 100%;
			height: 600px;
			border: 1px solid;
		}
		#div0101
		{
			width: 20%;
			height: 600px;
			border: 1px solid;
			float:left
		}
		#div0102
		{
			width: 79%;
			height: 600px;
			border: 1px solid;
			background-color: forestgreen;
			float:left;
			display: block;/*显示*/
		}
		#div0103
		{
			width: 79%;
			height: 600px;
			border: 1px solid;
			background-color:  yellowgreen;
			float:left;
			display: none;/*隐藏*/
		}
		#div0104
		{
			width: 79%;
			height: 600px;
			border: 1px solid;
			background-color: peru;
			float:left;
			display: none;/*隐藏*/
		}
		#div0105
		{
			width: 79%;
			height: 600px;
			border: 1px solid;
			background-color: brown;
			float:left;/*靠左*/
			display: none;/*隐藏*/
		}		
	</style>	
	<body>
		<div id="div01">
			<!--左边div-->
			<div id="div0101">
				<input type="button" value="火影忍者"onclick="ones()"/>
				<br>
				<input type="button" value="海贼王"onclick="twos()"/>
				<br>
				<input type="button" value="名侦探柯南"onclick="threes()"/>
				<br>
				<input type="button" value="一拳超人"onclick="fourths()"/>
				<br>
			</div>
			<!--右边1div-->
			<div id="div0102"></div>
			<!--右边2div-->
			<div id="div0103"></div>
			<!--右边3div-->
			<div id="div0104"></div>
			<!--右边4div-->
			<div id="div0105"></div>
		</div>
	</body>
</html>

<script>
	function ones()
	{
		//显示
		document.getElementById("div0102").style.display="block";
		//隐藏
		document.getElementById("div0103").style.display="none";
		document.getElementById("div0104").style.display="none";
		document.getElementById("div0105").style.display="none";
	}	
	function twos()
	{
		//显示
		document.getElementById("div0103").style.display="block";
		//隐藏
		document.getElementById("div0102").style.display="none";
		document.getElementById("div0105").style.display="none";
		document.getElementById("div0104").style.display="none";
	}
	function threes()
	{
		//显示
		document.getElementById("div0104").style.display="block";
		//隐藏
		document.getElementById("div0102").style.display="none";
		document.getElementById("div0105").style.display="none";
		document.getElementById("div0103").style.display="none";	
	}	
	function fourths()
	{
		//显示
		document.getElementById("div0105").style.display="block";
		//隐藏
		document.getElementById("div0104").style.display="none";
		document.getElementById("div0103").style.display="none";
		document.getElementById("div0102").style.display="none";
	}	
</script>
